<template>
  <div class="order-create">
    <div class="container">

      <createTop firstMenu="配料采购" secondMenu="采购订单" title="添加/编辑"></createTop>

      <el-card class="top-card" shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          <span class="left">待采购清单</span>
          <el-button
          :style="{'marginLeft':'20px'}"
          size="mini"
          plain
          type="success"
          @click="add">新增</el-button>
        </div>
           <div class="order-create-table-wrap">
              <el-table
                :data="tableData"
                style="width: 100%"
                :fit="true"
                :stripe="true"
                size="mini"
                align="center">
                <el-table-column label="操作"
                min-width="110"
                align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      plain
                      type="danger"
                      @click="del(scope.$index,scope.row)">删除</el-button>
                  </template>
                </el-table-column>

                <el-table-column
                :show-overflow-tooltip="true"
                  prop="material_number"
                  label="配料编号"
                  min-width="80"
                  align="center">
                </el-table-column>

                <el-table-column
                :show-overflow-tooltip="true"
                  prop="material_name"
                  label="配料名称"
                  min-width="130"
                  align="center">
                </el-table-column>

                <el-table-column
                :show-overflow-tooltip="true"
                  prop="format_name"
                  label="规格/型号"
                  min-width="80"
                  align="center">
                </el-table-column>

                <el-table-column
                :show-overflow-tooltip="true"
                  prop="material_unit"
                  label="单位"
                  min-width="70"
                  align="center">
                </el-table-column>
                
                <el-table-column 
                label="采购数量"
                min-width="110"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.purchase_count" 
                    placeholder="输入采购数量"
                    @blur="check(scope)"></el-input>
                  </template>
                </el-table-column>
                
                <el-table-column
                :show-overflow-tooltip="true"
                label="供应商"
                min-width="110"
                align="center">
                  <template slot-scope="scope">
                    <el-select 
                    class="right-margin" 
                    size="small" 
                    @clear="supplierClear(scope)" 
                    @change='supplierChange(scope)' 
                    v-model="scope.row._supplier" 
                    placeholder="选择供应商">
                      <el-option v-for="item in scope.row.suppliers_info" :key="item.suppliers_id" :label="item.nickname" :value="item.suppliers_id"></el-option>
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column
                :show-overflow-tooltip="true"
                  prop="_price"
                  label="采购单价(元)"
                  min-width="90"
                  align="center">
                </el-table-column>

                <el-table-column
                :show-overflow-tooltip="true"
                  prop="allPrice"
                  label="小计(元)"
                  min-width="80"
                  align="center">
                  <template slot-scope="scope">
                    <div>{{scope.row.allPrice.toFixed(3)}}</div>
                  </template>
                </el-table-column>
                
                <el-table-column
                :show-overflow-tooltip="true"
                label="备注"
                min-width="90"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.remark" 
                    placeholder="备注"></el-input>
                  </template>
                </el-table-column>

              </el-table>
              <div class="otherPrice">
                其他费用 : 
                <el-input 
                size="mini"
                :style="{'width':'100px'}"
                v-model="otherPrice"
                @blur= "otherPriceChange"
                placeholder="0"></el-input>
              </div>

              <div class="otherPrice">
                总费用 : {{allPrice.toFixed(3)}}
              </div>

            </div>
      </el-card>

      <el-card :style="{'margin-bottom':'20px'}" shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          <div class="left">采购信息</div>
        </div>
        <div class="content">
          <div class="se">
            <div class="content-title">制单人</div>
            <el-input :style="{'width':'350px'}" disabled placeholder="读取账号"></el-input>
          </div>

          <div class="se">
            <div class="content-title">采购单号</div>
            <el-input :style="{'width':'350px'}" disabled v-model="order" placeholder="自动填充"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">采购日期 <span class="red-icon">※</span></div>
            <el-date-picker
             :style="{'width':'350px'}"
              v-model="date"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>

            <div class="content-title">预计到货日期 <span class="red-icon">※</span></div>
            <el-date-picker
             :style="{'width':'350px'}"
              v-model="yujidate"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>

            <div class="content-title">采购人</div>
            <el-input :style="{'width':'350px'}" v-model="doName" placeholder="输入经办人姓名"></el-input>
          </div>
          <div class="se">

            <div class="content-title">采购备注 </div>
            <el-input :style="{'width':'350px'}" v-model="remark" type="textarea" :rows="5" resize="none" placeholder="输入适当的备注方便管理"></el-input>
          </div>
        </div>
      </el-card>

      <saveBtn @confirm="confirm"></saveBtn>

      <childTable v-show="showChild" @confirm="addTable" @close="clseChild"></childTable>

    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
// import tableList from '@/tables/produceInCreateTable.vue';
import childTable from '@/tables/supplier/supplierOrderCreateChild.vue';
import { Watch } from 'vue-property-decorator';
@Component({
  components: {
    createTop,
    saveBtn,
    // tableList,
    childTable
  }
})
export default class SupplierOrderCreate extends Vue {
  createRes!: ajaxResquest;
  infoRes!: ajaxResquest;
  doName: string = '';
  loading: boolean = false;
  info!: object;
  id!: string;
  date: string = '';
  yujidate: string = '';
  leixing: string = '其他出库';
  sellName: string = '';
  order: string = '';
  remark: string = '';
  tableData: any[] = [];

  inCount: string = '';
  tableRemark: string = '';
  showMask: boolean = false;

  showChild: boolean = false;

  customers: any[] = [];
  customer: string = '';
  te: string = '';
  otherPrice: string = '';
  allPrice: any = 0;
  fapiao: string = '';
  fapiaos: any[] = [
    { value: '不开发票' },
    { value: '增值税普票' },
    { value: '增值税发票' }
  ];

  // 客户信息
  customerInfo: any = {};
  supplier: string = '';

  mounted() {
    if (this.$route.query.edit) {
      this.id = this.$route.query.id;
      this.infoRes = new ajaxResquest('/purchase/purchaseUpdateAdd');
      this.getInfo();
    }
    this.createRes = new ajaxResquest('/purchase/purchaseUpdateAddToDo');
  }

  getInfo() {
    this.infoRes.getFunction({ purchaseInfoId: this.id }).then((res: any) => {
      console.log(res);
      if (res.data.code === 1) {
        console.log(res.data);
        let temp = res.data.data.types;
        this.doName = temp.purchase_name;
        this.allPrice = temp.all_price;
        this.otherPrice = temp.other_price ? temp.other_price : '';
        this.date = temp.date;
        this.remark = temp.remarks;
        this.yujidate = temp.yuji_date;
        console.log(this.tableData);
        let o = res.data.data.purchasesList;

        o.map((i: any) => {
          i.suppliers_info.forEach((e: any) => {
            if (e.suppliers_id === i.suppliers_id) {
              i._price = e.price;
              i.allPrice = parseFloat(i.purchase_count) * parseFloat(i._price);
              i._supplier = e.suppliers_id;
            }
          });
        });
        this.tableData = [...this.tableData, ...o];
      }
    });
  }
  otherPriceChange() {
    let temp: number = 0;
    this.tableData.map(i => {
      if (i.allPrice) {
        temp = temp + parseFloat(i.allPrice);
      }
    });
    if (this.otherPrice) {
      this.allPrice = (temp + parseFloat(this.otherPrice));
    } else {
      this.allPrice = temp;
    }
  }
  add(val: any) {
    this.showChild = true;
  }
  del(index: number, val: any) {
    this.tableData.splice(index, 1);
    let temp: number = 0;
    this.tableData.map(i => {
      if (i.allPrice) {
        temp = temp + parseFloat(i.allPrice);
      }
    });
    if (this.otherPrice) {
      this.allPrice = (temp + parseFloat(this.otherPrice));
    } else {
      this.allPrice = temp;
    }
  }
  clseChild() {
    this.showChild = false;
  }
  addTable(val: any) {
    console.log(val);

    let temp = val;
    let tempData: any[] = [];
    temp.map((i: any) => {
      i._models_id.map((j: any) => {
        let count!: number;
        let name!: string;
        let fId!: string;
        let suppliers_info!: any;
        let _supplier!: any;
        let price!: any;
        i.format_info.forEach((e: any) => {
          if (e.format_id === j) {
            name = e.format_name;
            fId = e.format_id;
            suppliers_info = e.suppliers_info;
          }
        });
        suppliers_info.forEach((e: any) => {
          if (e.order === 1) {
            _supplier = e.suppliers_id;
            price = e.price;
          }
        });
        let data = {
          id: i.id,
          material_name: i.material_name,
          material_number: i.material_number,
          materials_id: i.materials_id,
          material_unit: i.material_unit,
          format_name: name,
          format_id: fId,
          tableRemark: '',
          outCount: 0,
          suppliers_info: suppliers_info,
          _supplier: _supplier,
          _price: price,
          allPrice:0
        };
        tempData.push(data);
      });
    });
    this.tableData = [...this.tableData, ...tempData];
    console.log(this.tableData);
    this.showChild = false;
  }
  supplierChange(row: any) {
    console.log(row.row);
    if (row.row._supplier) {
      let price: any;
      row.row.suppliers_info.forEach((e: any) => {
        if (e.suppliers_id === row.row._supplier) {
          price = e.price;
        }
      });
      this.$set(this.tableData[row.$index], '_price', price);
      if (row.row.purchase_count) {
        console.log(row.row.purchase_count);
        console.log(row.row._price);VideoTrackList
        let val =
          parseFloat(row.row.purchase_count) * parseFloat(row.row._price);
        this.$set(this.tableData[row.$index], 'allPrice', val);
      }
      let temp: number = 0;
      this.tableData.map(i => {
        if (i.allPrice) {
          temp = temp + parseFloat(i.allPrice);
        }
      });
      if (this.otherPrice) {
        this.allPrice = (temp + parseFloat(this.otherPrice));
      } else {
        this.allPrice = temp;
      }
    }
  }
  supplierClear(scope: any) {
    this.$set(this.tableData[scope.$index], '_price', '');
  }
  check(row: any) {
    if (row.row.purchase_count) {
      if (row.row._price) {
        let val =
          parseFloat(row.row.purchase_count) * parseFloat(row.row._price);
        this.$set(this.tableData[row.$index], 'allPrice', val);
        let temp: number = 0;
        this.tableData.map(i => {
          if (i.allPrice) {
            temp = temp + parseFloat(i.allPrice);
          }
        });
        if (this.otherPrice) {
          this.allPrice = (temp + parseFloat(this.otherPrice));
        } else {
          this.allPrice = temp;
        }
      }
    }
  }
  confirm(): void {
    let temp = this.tableData;
    let isZero: any = false;
    let sTemp: any = temp.map((i: any) => {
      if (!i.purchase_count) {
        this.$message.error('采购数量不能为空');
        isZero = true;
      }
      if (!i._supplier) {
        this.$message.error('供应商不能为空');
        isZero = true;
      }
      return {
        materials_id: i.materials_id,
        number: i.purchase_count,
        suppliers_id: i._supplier,
        format_id: i.format_id,
        remarks: i.remark ? i.remark : ''
      };
    });
    if (!this.yujidate) {
      this.$message.error('预计到货日期不能为空');
      return;
    }
    if (isZero) {
      return;
    }
    sTemp = JSON.stringify(sTemp);

    let data: any = {
      yuji_date: this.yujidate,
      purchaseOrderInfo: sTemp,
      doName: this.doName,
      date: this.date,
      remarks: this.remark,
      otherPrice: this.otherPrice,
      allPrice: this.allPrice
    };
    this.createRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        this.$to('supplierOrder');
      }
    });
  }
  selectChange(val: any) {
    // console.log(val);
    let temp;
    this.customers.map((i: any) => {
      if (i.id === val) {
        this.customerInfo = i;
      }
    });
  }
}
</script>
<style lang="less">
.order-create {
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  overflow: auto;
  .top-card {
    box-sizing: border-box;
    margin-bottom: 15px;
  }
  .el-card {
    overflow-y: auto;
  }
  .content {
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 30px;
      margin-top: 5px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 10px;
    }
  }
  .card-title {
    position: relative;
    .right {
      position: absolute;
      right: 0px;
      top: -5px;
    }
  }
  .search {
    text-align: left;
    margin-left: 10px;
    margin-bottom: 15px;
  }
  .info {
    text-align: left;
    .item {
      height: 30px;
    }
  }
  .otherPrice {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
  }
  .fapiao {
    text-align: left;
    margin-top: 15px;
    .item {
      height: 30px;
    }
    .fapiao-select {
      height: 45px;
    }
  }
  .left {
    text-align: left;
    font-weight: 600;
  }
}
</style>
